<template>
	<BOX title="环境监测" :ss="props.ss">
		<template #content>
			<template v-if="flag">
				<div style="color: #fff">{{flagMsg}}</div>
			</template>
			<template v-else>
				<div class="tq_top">
					<div class="tem">{{store.state.tianqi.data[0].tem}}℃</div>
					<div class="tem1">
						<div>最低：{{store.state.tianqi.data[0].tem2}}℃</div>
						<div>最高：{{store.state.tianqi.data[0].tem1}}℃</div>
					</div>
					<div class="air" :title="'空气质量：'+store.state.tianqi.data[0].air_tips">
						空气质量：{{store.state.tianqi.data[0].air_tips}}
					</div>
				</div>
				<div class="tq_center">
					<div class="xhx">气压：{{store.state.tianqi.data[0].pressure}}hPa</div>
					<div class="xhx">风力：{{store.state.tianqi.data[0].win_speed}}</div>
					<div>湿度：{{store.state.tianqi.data[0].humidity}}</div>
				</div>
				<div class="tq_bottom">
					<div class="rhx">今天：{{store.state.tianqi.data[0].wea_img}}
						<br>日出：{{store.state.tianqi.data[0].sunrise}} <br> 日落：{{store.state.tianqi.data[0].sunset}}
						<br>能见度：{{store.state.tianqi.data[0].visibility}}
					</div>
					<div>明天：{{store.state.tianqi.data[1].wea_img}}<br>日出：{{store.state.tianqi.data[1].sunrise}} <br>
						日落：{{store.state.tianqi.data[1].sunset}} <br>能见度：{{store.state.tianqi.data[1].visibility}}
					</div>
				</div>
			</template>

		</template>
		<template #modal>
			<template v-if="flag">
				<div style="color: #fff">{{flagMsg}}</div>
			</template>
			<template v-else>
				<div class="tq_top">
					<div class="tem">{{store.state.tianqi.data[0].tem}}℃</div>
					<div class="tem1">
						<div>最低：{{store.state.tianqi.data[0].tem2}}℃</div>
						<div>最高：{{store.state.tianqi.data[0].tem1}}℃</div>
					</div>
					<div class="air" :title="'空气质量：'+store.state.tianqi.data[0].air_tips">
						空气质量：{{store.state.tianqi.data[0].air_tips}}
					</div>
				</div>
				<div class="tq_center">
					<div class="xhx">气压：{{store.state.tianqi.data[0].pressure}}hPa</div>
					<div class="xhx">风力：{{store.state.tianqi.data[0].win_speed}}</div>
					<div>湿度：{{store.state.tianqi.data[0].humidity}}</div>
				</div>
				<div class="tq_bottom">
					<div class="rhx">今天：{{store.state.tianqi.data[0].wea_img}}
						<br>日出：{{store.state.tianqi.data[0].sunrise}} <br> 日落：{{store.state.tianqi.data[0].sunset}}
						<br>能见度：{{store.state.tianqi.data[0].visibility}}
					</div>
					<div>明天：{{store.state.tianqi.data[1].wea_img}}<br>日出：{{store.state.tianqi.data[1].sunrise}} <br>
						日落：{{store.state.tianqi.data[1].sunset}} <br>能见度：{{store.state.tianqi.data[1].visibility}}</div>
				</div>
			</template>
		</template>
	</BOX>
</template>

<script lang="ts" setup>
	import BOX from "@/components/z-box/index.vue"
	// 
	import store from "@/store/index"

	import { defineProps, onMounted, reactive, ref } from "vue"
	import ws from '../../../../utils/ws';
	
	// let wss = new ws()
	ws.connectWS()
	// ws.sendMsg({type:'jiekou2'})
	let props = defineProps({
		title: {
			default: "标题",
			type: String
		},
		ss: {
			type: Boolean,
			default: "true"
		}
	})

	const flag = ref(true)
	const flagMsg = ref("")
	if (store.state.tianqi.errcode === 200) {
		flag.value = false
	} else {
		flag.value = true
		flagMsg.value = store.state.tianqi.errmsg
	}
	console.log(store.state.tianqi, 66)
	onMounted(() => {
		console.log(props.title, 24)
	})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.tq_top {
		color: #fff;
		display: flex;
	}

	.tq_top>div {
		flex: 1;
		height: 100px;
		overflow: hidden;

		text-overflow: ellipsis;
	}

	.tem {
		font-size: 3rem;
		line-height: 100px;
	}

	.tem1 {
		line-height: 50px;
	}

	.tq_center {
		/* border: 1px solid yellow; */
		color: #fff;
		padding: 10px;
		background-color: #2485da2e;

	}

	.tq_center>div {
		line-height: 40px;

	}

	.tq_bottom {
		margin-top: 10px;
		display: flex;
		background-color: #2485da2e;
		color: #fff;
		padding: 10px;
	}

	.tq_bottom>div {
		flex: 1;
		padding-left: 20px;
	}

	.xhx {
		border-bottom: 1px solid #fff;
	}

	.rhx {
		border-right: 1px solid #fff;
	}
</style>